/**
 * Sass 混合器集合
 * 包含响应式、布局、文本处理等常用混合器
 */
@use 'sass:math';
@use 'sass:color';
@use 'sass:map';
@use './variables.scss' as variables;

// 响应式断点
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1400px
);

// 响应式媒体查询混合器
@mixin respond-to($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    @media (min-width: map.get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @error "未知的断点: #{$breakpoint}。可用的断点有: #{map.keys($breakpoints)}";
  }
}

// Flex 布局混合器
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 文本截断混合器
@mixin text-truncate($lines: 1) {
  @if $lines == 1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// 阴影混合器
@mixin shadow($level: 1) {
  @if $level == 1 {
    box-shadow: var(--shadow-1);
  } @else if $level == 2 {
    box-shadow: var(--shadow-2);
  } @else if $level == 3 {
    box-shadow: var(--shadow-3);
  } @else {
    @error "未知的阴影级别: #{$level}。可用的级别有: 1, 2, 3";
  }
}

// 过渡混合器
@mixin transition($properties: all, $duration: 0.3s, $timing: ease) {
  transition-property: $properties;
  transition-duration: $duration;
  transition-timing-function: $timing;
}

// 按钮混合器
@mixin button-style($bg-color, $text-color, $hover-bg-color: null, $hover-text-color: null) {
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-weight: 500;
  cursor: pointer;
  @include transition;

  $hover-bg: if($hover-bg-color, $hover-bg-color, color.scale($bg-color, $lightness: 10%));
  $hover-text: if($hover-text-color, $hover-text-color, $text-color);

  &:hover {
    background-color: $hover-bg;
    color: $hover-text;
  }
}

// 卡片混合器
@mixin card($padding: 1rem, $radius: var(--radius-md), $bg-color: var(--white)) {
  background-color: $bg-color;
  border-radius: $radius;
  padding: $padding;
  @include shadow(1);
}
